<!--
 * @Author: your name
 * @Date: 2021-03-14 15:01:33
 * @LastEditTime: 2021-04-21 23:21:30
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \guzheng\src\views\pages\communication.vue
-->
<template>
  <div>
    <div class="user-info">
      <div>
        <el-avatar :size="60">{{getUserName.split('')[0].toUpperCase()}}</el-avatar>
        <div>{{getUserName}}</div>
        <el-button type="primary" 
          icon="el-icon-edit" 
          style="margin-top:5px;"
          @click="open()"
        >我要发帖</el-button>
      </div>
    </div>
    <div class="content">
      <div class="content-item" v-for="item of combineList" :key="item.id">
        <div class="author">
          <el-avatar :size="50">{{item.name.split('')[0].toUpperCase()}}</el-avatar>
          <div>{{item.name}}</div>
        </div>
        <div class="message">{{item.content}}</div>
        <div class="footer">
          <span>发布于：{{item.createTime}}</span>
          <div class="btn">
            <el-button :type="item.applyArr.length ? 'success' : 'primary'" size="small" 
              icon="el-icon-chat-dot-round" circle @click="apply(item.id)">
            </el-button>
            <el-button v-if="isUser(item.email)" @click="delCommun(item.id)"
              type="danger" size="small" icon="el-icon-delete" circle>
            </el-button>
          </div>
        </div>
        <el-collapse v-if="item.applyArr.length">
          <el-collapse-item title="查看回复">
            <div class="collpase-item" v-for="apply of item.applyArr" :key="apply.createTime">
              <div class="apply-msg">
                <div class="apply-user">
                  <el-avatar size="small">{{apply.name.split('')[0].toUpperCase()}}</el-avatar>
                  <div>{{apply.name}}:</div>
                </div>
                <div class="apply-content">{{apply.content}}</div>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>

      <div class="empty-message">～没有更多了～</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "communication",
  data() {
    return {
      // 发布帖子内容对象
      data: {},
      // 回复帖子内容对象
      applyMsg: {},
      // 帖子列表（不包含回复内容）
      communList: [],
      // 回复列表
      applyList: [],
    };
  },
  computed: {
    // 根据邮箱获取用户名(用到了状态管理器vuex)
    getUserName: function() {
      const email = this.$store.state.user.email;
      return email.split("@")[0];
    },
    // 合并帖子列表和回复列表
    combineList: function() {
      return this.communList.map((item) => {
        const applyArr = [];
        this.applyList.forEach(apply => {
          if (apply.id === item.id) {
            applyArr.push(apply);
          }
        });
        item.applyArr = applyArr.reverse();
        return item;
      });
    }
  },
  mounted() {
    this.getListData();
  },
  methods: {
    // 回复帖子
    apply(id) {
      this.$prompt('请输入内容', '回复', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        this.applyMsg.id = id;
        this.applyMsg.name = this.getUserName;
        this.applyMsg.content = value;
        this.applyMsg.createTime = new Date().toLocaleString();
        this.$http.post('/api/apply', this.applyMsg)
          .then(({ data }) => {
            if (data.code === 200) {
              this.$message({
                type: 'success',
                message: '回复成功'
              });
              this.getListData();
            }
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });       
      });
    },
    // 发布帖子弹窗
    open() {
      this.$prompt('请输入内容', '发帖', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        this.data.name = this.getUserName;
        this.data.content = value;
        this.data.email = this.$store.state.user.email;
        this.data.createTime = new Date().toLocaleString();
        this.$http.post('/api/commun', this.data)
          .then(({ data }) => {
            if (data.code === 200) {
              this.$message({
                type: 'success',
                message: '发布成功'
              });
              this.getListData();
            }
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });       
      });
    },
    // 删除帖子（只能删除自己发的）
    delCommun(id) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete('/api/delCommun/' + id)
          .then(({ data }) => {
            console.log(data);
            if (data.code === 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getListData();
            }
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    // 获取所有列表数据
    getListData() {
      this.$http.get('/api/getCommun')
        .then(({ data }) => {
          this.communList = data.data.reverse();
        });
      
      this.$http.get('/api/getApplyMsg')
        .then(({ data }) => {
          this.applyList = data.data;
        });
    },
    // 判断该条帖子的作者是不是当前用户，是当前用户的话可以删除自己发的帖子
    isUser(email) {
      return email === this.$store.state.user.email;
    }
  },
};
</script>

<style scoped>
.content {
  width: 100%;
  margin-top: 20px;
  padding-bottom: 40px;
}
.content-item {
  margin: 10px 0;
  padding: 10px 0 0 10px;
  border-radius: 2px;
  background: #fff;
}
.empty-message {
  color: darkgray;
  font-size: 18px;
  padding-top: 20px;
}
::v-deep .el-avatar {
  font-size: 20px;
}
::v-deep .el-button--small.is-circle {
  font-size: 20px;
  padding: 6px;
}
.user-info {
  padding: 20px 0;
  background: rgb(238, 245, 254);
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.message {
  padding: 0 20px 10px 60px;
  text-align: left;
  font-size: 18px;
  line-height: 30px;
}
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 10px 60px;
}
.footer > span, .apply-msg .apply-time {
  color: darkgray;
  font-size: 14px;
}
::v-deep .el-collapse-item__header {
  padding: 0 20px 0 60px;
}
::v-deep .apply-msg .el-avatar {
  font-size: 14px;
}
.apply-msg {
  display: flex;
  align-items: baseline;
  text-align: left;
  gap: 10px;
  padding: 6px 20px 6px 60px;
  border-top: 1px solid #EBEEF5;
}
.apply-user {
  display: flex;
  align-items: center;
  gap: 10px;
}
.apply-content {
  flex: 1 1;
}
</style>